.slide {
    border: 2px solid #2980b9;
    color: #172ad6;
    position: relative;
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 35px;
    z-index: 1;
    transition: .5s;
}

.slide::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 0;
    height: 100%;
    left: 0;
    background-color: #2980b9;
    transition: ease-in-out .5s;
}

.slide:hover::before {
    width: 100%;
}
